<template>
  <div class="collection_num_box">
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
      <!--<el-button v-show="nodeObj._id && showDeleteBtn" type="primary" class="primary_btn delete_btn" @click="deleteLi">{{$t('public.delete')}}</el-button>-->
    </div>
    <el-form :model="nodeObj" label-width="180px" ref="nodeObj" :rules="rules" v-if="showForm">
      <el-form-item class="form_li node_name" prop="name" :label="$t('configLazyLoad.process.nodeName')">
        <el-input :maxlength="30" v-model.trim="nodeObj.name" class="input_box"></el-input>
      </el-form-item>
      </br>
      <el-form-item class="form_li"  prop="noExtenProcessTo" :label="$t('configLazyLoad.process.processLabel10')">
        <nodeSelect
          @oneChange="onChange"
          onePath="noExtenProcessType"
          :nodeType="nodeObj.noExtenProcessType"
          @twoChange="onChange"
          twoPath="noExtenProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.noExtenProcessTo"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li"  prop="extenNotMatchProcessTo" :label="$t('configLazyLoad.process.processLabel11')">
        <nodeSelect
          @oneChange="onChange"
          onePath="extenNotMatchProcessType"
          :nodeType="nodeObj.extenNotMatchProcessType"
          @twoChange="onChange"
          twoPath="extenNotMatchProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.extenNotMatchProcessTo"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentOfflineProcessTo" :label="$t('configLazyLoad.process.processLabel12')">
        <nodeSelect
          @oneChange="onChange"
          onePath="agentOfflineProcessType"
          :nodeType="nodeObj.agentOfflineProcessType"
          @twoChange="onChange"
          twoPath="agentOfflineProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.agentOfflineProcessTo"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentStatusCloseProcessTo" :label="$t('configLazyLoad.process.processLabel13')">
        <nodeSelect
          @oneChange="onChange"
          onePath="agentStatusCloseProcessType"
          :nodeType="nodeObj.agentStatusCloseProcessType"
          @twoChange="onChange"
          twoPath="agentStatusCloseProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.agentStatusCloseProcessTo"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li" prop="welcomeNodeId" :label="$t('configLazyLoad.process.processLabel14')">
        <welcomeSelect
          @changeOption="welcomeChange"
          :welcomeNodeId = "nodeObj.welcomeNodeId">
        </welcomeSelect>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import nodeSelect from '../../../base/webchatNodeSelect.vue'
  import { deepClone } from '@utils/m7Utils.js'
  import welcomeSelect from '../../../base/webchatNodeSelectWel.vue'
  import Vue from 'vue'
  export default {
    name: 'collectionNumEdit',
    data () {
      return {
        nodeObj: {
          _id: '', // id
          account: '', // 账户id
          type: 'exten', // 节点类型
          name: '', // 节点名称
          noExtenProcessType: 'system', // 未传工号时流转节点类型
          noExtenProcessTo: 'finish', // 未传工号时流转节点id
          extenNotMatchProcessType: 'system', // 工号不存在时流转节点类型
          extenNotMatchProcessTo: 'finish', // 工号不存在时流转节点id
          agentOfflineProcessType: 'system', // 座席不在线时流转节点类型
          agentOfflineProcessTo: 'finish', // 座席不在线时流转节点id
          agentStatusCloseProcessType: 'system', // 座席领取开关关闭时流转类型
          agentStatusCloseProcessTo: 'finish', // 座席领取开关关闭时流转节点id
          agentBusyProcessType: 'system', // 座席达到会话上限时流转节点类型
          agentBusyProcessTo: 'finish', // 座席达到会话上限时流转节点id
          createTime: '', // 创建时间
          createUser: '', // 创建人
          updateTime: '', // 修改时间
          updateUser: '', // 修改人
          welcomeNodeId: '',
          nextNodeIds: [''] // 流转节点id数组
        },
        showForm: false,
        optionsOne: [],
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      showDeleteBtn: {
        type: Boolean,
        default: true
      },
      dataId: {
        type: String,
        default: ''
      },
      random: Number,
      todoType: String
    },
    watch: {
      random () {
        this.resetForm()
        this.initData()
      }
    },
    methods: {
      initData () {
        this.showForm = false
        if (this.dataId) {
          let data = {
            _id: this.dataId
          }
          let that = this
          this.$store.dispatch('getNodeById', data).then((res) => {
            if (res.success) {
              that.nodeObj = deepClone(res.data)
              if (!that.nodeObj.welcomeNodeId) {
                Vue.set(that.nodeObj, 'welcomeNodeId', '')
              }
              that.showForm = true
            }
          })
        } else {
          this.nodeObj = {
            _id: '', // id
            account: '', // 账户id
            type: 'exten', // 节点类型
            name: '', // 节点名称
            noExtenProcessType: 'system', // 未传工号时流转节点类型
            noExtenProcessTo: 'finish', // 未传工号时流转节点id
            extenNotMatchProcessType: 'system', // 工号不存在时流转节点类型
            extenNotMatchProcessTo: 'finish', // 工号不存在时流转节点id
            agentOfflineProcessType: 'system', // 座席不在线时流转节点类型
            agentOfflineProcessTo: 'finish', // 座席不在线时流转节点id
            agentStatusCloseProcessType: 'system', // 座席领取开关关闭时流转类型
            agentStatusCloseProcessTo: 'finish', // 座席领取开关关闭时流转节点id
            agentBusyProcessType: 'system', // 座席达到会话上限时流转节点类型
            agentBusyProcessTo: 'finish', // 座席达到会话上限时流转节点id
            createTime: '', // 创建时间
            createUser: '', // 创建人
            updateTime: '', // 修改时间
            updateUser: '', // 修改人
            welcomeNodeId: '',
            nextNodeIds: [''] // 流转节点id数组
          }
          this.showForm = true
        }
      },
      welcomeChange (data) {
        this.nodeObj.welcomeNodeId = data
      },
      onChange (data) {
        this.nodeObj[data.path] = data.value
      },
      resetForm () {
        this.$refs['nodeObj'].resetFields()
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
            if (that.todoType === 'add') {
              that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'extenNode', data: that.nodeObj})
                  that.$message.success(this.$t('config.customer.addSucc'))
                  that.$emit('back')
                }
              })
            } else {
              that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'extenNode', data: that.nodeObj})
                  that.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                  that.$emit('back')
                }
              })
            }
          }
        })
      }
    },
    components: {
      nodeSelect,
      welcomeSelect
    },
    beforeMount () {
      this.initData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .node_name
    width 460px
  .collection_num_box
    padding 10px
  .delete_btn
    background-color #ff6b6b
    border-color #ff6b6b
  .start_input
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 15px
      right -20px
</style>
